<template>
  <h1 class="mb-8 text-lg">Categories</h1>
  <section class="grid grid-cols-4 gap-x-4">
    <RouterLink
      to="/categories/products/shoes"
      class="bg-white rounded shadow-md text-slate-500 shadow-slate-200 hover:bg-slate-100 transition-colors"
    >
      <figure>
        <img src="https://placehold.co/400x200" alt="card image" class="w-full rounded-t" />
      </figure>
      <div class="p-6">
        <header class="mb-4">
          <h3 class="text-xl font-medium text-slate-700">Shoes</h3>
        </header>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto error quas totam? Nostrum
          excepturi enim vitae laboriosam culpa odio.
        </p>
      </div>
    </RouterLink>
    <RouterLink
      to="/products/shirts"
      class="bg-white rounded shadow-md text-slate-500 shadow-slate-200 hover:bg-slate-100 transition-colors"
    >
      <figure>
        <img src="https://placehold.co/400x200" alt="card image" class="w-full rounded-t" />
      </figure>
      <div class="p-6">
        <header class="mb-4">
          <h3 class="text-xl font-medium text-slate-700">Shirts</h3>
        </header>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto error quas totam? Nostrum
          excepturi enim vitae laboriosam culpa odio.
        </p>
      </div>
    </RouterLink>
    <RouterLink
      to="/products/pants"
      class="bg-white rounded shadow-md text-slate-500 shadow-slate-200 hover:bg-slate-100 transition-colors"
    >
      <figure>
        <img src="https://placehold.co/400x200" alt="card image" class="w-full rounded-t" />
      </figure>
      <div class="p-6">
        <header class="mb-4">
          <h3 class="text-xl font-medium text-slate-700">Pants</h3>
        </header>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto error quas totam? Nostrum
          excepturi enim vitae laboriosam culpa odio.
        </p>
      </div>
    </RouterLink>
  </section>
</template>
